<template>
  <MenuView />

  <div class="contextContainer">
    <UserView />

    <div class="contextEcharts">
      <div class="contextBody">
        <ScallopView />
        <Thermodynamic />
      </div>
      
      <LineChart />
    </div>
  </div>
</template>

<script setup>
import MenuView from '../components/MenuView.vue';
import UserView from '../components/UserView.vue';
import ScallopView from '../components/ScallopView.vue';
import Thermodynamic from '../components/Thermodynamic.vue';
import LineChart from '../components/LineChart.vue';

</script>

<style>
body,
#app {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  margin: 0%;
  padding: 0%;
}

.contextContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  height: 100%;
}

.contextEcharts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 95%;
}

.contextBody {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 40%;
}
</style>